<template>
	<div class="app-container">
		<div class="btns">
			<div class="headItem">
				<el-button type="primary">北京赛车</el-button>
			</div>
			<div class="headItem">
				<el-button class="active" type="primary">澳洲幸运10</el-button>
			</div>
		</div>
		<div class="con">
			<div class="c-top">
				<div class="ct-item2">
					<div class="cti-title1">
						<div>冠亚和大小单双设置</div>
						<div class="headItem">
							<el-button class="active" type="primary">保存</el-button>
						</div>
					</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">大小单双总注封顶</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
								</div>
							</div>
						</div>
					</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex1">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">大</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">小</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">单</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">双</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-top">
				<div class="ct-item2">
					<div class="cti-title">冠亚和单点设置</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">冠亚和单点总注封顶</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
								</div>
							</div>
						</div>
					</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex1">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">3</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">4</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">5</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">6</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">7</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-top">
				<div class="ct-item2">
					<div class="cti-title">车道大小单双设置</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">大小单双总注封顶</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
								</div>
							</div>
						</div>
					</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex1">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">大</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">小</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">单</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">双</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-top">
				<div class="ct-item">
					<div class="cti-title">龙虎设置</div>
					<div class="cti-list">
						<div class="cti-item">
							<div class="cti-item-left">龙</div>
							<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
							<div class="cti-item-right">倍</div>
							<div class="cti-item-left">虎</div>
							<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
							<div class="cti-item-right">倍</div>
						</div>
						<div class="cti-item">
							<div class="cti-item-left">龙虎总注封顶</div>
							<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
						</div>
					</div>
				</div>
				<div class="ct-item">
					<div class="cti-title">车道组合设置</div>
					<div class="cti-list">
						<div class="cti-item">
							<div class="cti-item-left">小单,大双</div>
							<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
							<div class="cti-item-right">倍</div>
							<div class="cti-item-left">大单,小双</div>
							<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
							<div class="cti-item-right">倍</div>
						</div>
						<div class="cti-item">
							<div class="cti-item-left">大小单双总注封顶</div>
							<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
						</div>
					</div>
				</div>
			</div>
			<div class="c-top">
				<div class="ct-item2">
					<div class="cti-title">车道单点设置</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">车道单点封顶</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
								</div>
							</div>
						</div>
					</div>
					<div class="ct-item2-con">
						<div class="ct-item2-con-flex1">
							<div class="cti-list">
								<div class="cti-item">
									<div class="cti-item-left">1</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">2</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">3</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">4</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
								<div class="cti-item">
									<div class="cti-item-left">5</div>
									<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
									<div class="cti-item-right">倍</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-top">
				<div class="ct-item2">
					<div class="cti-title1">
						<div>其他设置</div>
						<div class="headItem">
							<el-button class="active" type="primary">保存</el-button>
						</div>
					</div>
					<div class="ct-item2-con1">
						<div class="cti-list">
							<div class="cti-item">
								<div class="cti-item-left">游戏名称</div>
								<el-input type="text" placeholder="北京赛车👑" class="remarkInput" />
							</div>
							<div class="cti-item">
								<div class="cti-item-lefttext">玩法设置: </div>
								<el-checkbox
								  label="冠亚和猜大小单双"
								/>
								<el-checkbox
								  label="冠亚和猜和值"
								/>
								<el-checkbox
								  label="车道猜大小单双"
								/>
								<el-checkbox
								  label="车道猜组合"
								/>
								<el-checkbox
								  label="车道猜和值"
								/>
								<el-checkbox
								  label="龙虎"
								/>
							</div>
							<div class="cti-item">
								<div class="cti-item-left">封盘时间</div>
								<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
							</div>
							<div class="cti-item">
								<div class="cti-item-left">所有玩法单注最低</div>
								<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
								<div class="cti-item-left" style="margin-left: 10px;">总注封顶</div>
								<el-input v-model="num" type="number" step="0.1" class="remarkInput" />
							</div>
							<div class="cti-item">
								<div class="cti-item-lefttext" style="color: red;">设置游戏规则: </div>
							</div>
							<textarea id="textarea" cols="30" rows="10" placeholder="设置游戏规则"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
  name: 'Pk10',
  data() {
    return {
      num: 0
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>
<style scoped>
*{
	box-sizing: border-box;
}
.btns{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.headItem {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
}
/deep/.headItem .el-button--medium {
	padding: 5px 6px;
	font-size: 12px;
	margin-left: 5px;
	background-color: #e7e7e7;
	border-radius: 4px;
	border-color: #e7e7e7;
	color: #333;
}
/deep/.headItem .el-button--medium.active {
	padding: 5px 6px;
	font-size: 12px;
	margin-left: 5px;
	background-color: #c345cc;
	border-radius: 4px;
	border-color: #c345cc;
	color: #fff;
}
.headItemTow p {
	margin-left: 20px;
}
.con{
	width: 100%;
	border:1px solid #337ab7;
	background-color: #fff;
	margin-top: 10px;
	padding: 15px;
	border-radius: 3px;
}
.c-top{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.c-top:last-child{
	margin-bottom: 0;
}
.ct-item{
	width: 49%;
	border: 1px solid #d2d6de;
	border-top: 3px solid #00c0ef;
	border-radius: 3px;
}
.ct-item1{
	width: 24%;
	border: 1px solid #d2d6de;
	border-top: 3px solid #00c0ef;
	border-radius: 3px;
}
.ct-item2{
	width: 100%;
	border: 1px solid #d2d6de;
	border-top: 3px solid #00c0ef;
	border-radius: 3px;
}
.cti-title{
	width: 100%;
	padding: 10px;
	color: #444;
	border-bottom: 1px solid #f4f4f4;
	font-size: 18px;
	color: #444;
}
.cti-title1{
	width: 100%;
	padding: 10px;
	color: #444;
	border-bottom: 1px solid #f4f4f4;
	font-size: 18px;
	color: #444;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cti-list{
	width: 100%;
	padding: 10px;
}
.cti-item{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}
.cti-item:last-child{
	margin-bottom: 0;
}
.cti-item-left{
	height: 30px;
	border:1px solid #d2d6de;
	padding: 6px 12px;
	font-size: 14px;
	color: #555;
	border-right: 0;
}
.remarkInput{
	flex: 1;
}
/deep/ .remarkInput .el-input__inner{
	padding: 6px 12px;
	font-size: 14px;
	color: #555;
	height: 30px;
	line-height: 30px;
	border-radius: 0;
}
.cti-item-right{
	height: 30px;
	border:1px solid #d2d6de;
	padding: 6px 12px;
	font-size: 14px;
	color: #555;
	border-left: 0;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
	background-color: #c345cc;
	border-color: #c345cc;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
	color: #555;
}
.ct-item2-con{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.ct-item2-con-flex{
	width: 32%;
}
.ct-item2-con-flex1{
	width: 100%;
}
.ct-item2-con-flex1 .cti-list{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.ct-item2-con-flex1 .cti-item{
	width: 24%;
	margin-right: 1%;
}
.ct-item2-con-flex1 .cti-item:nth-child(4n){
	margin-right: 0;
}
.ct-item2-con-flex1 .cti-item:last-child{
	margin-bottom: 10px;
}
.ct-item2-con1 .remarkInput{
	width: 180px;
	flex: none;
}
.cti-item-lefttext{
	font-size: 14px;
	color: #555;
	margin-right: 10px;
}
#textarea{
	width: 100%;
	height: 134px;
	padding: 6px 12px;
	font-size: 14px;
	color: #555;
	border-color: #d2d6de;
}
</style>